<template>
    <li :class="{line:checked}">
      <label>
        <!--
          当前v-model中的数据来至于父组件list;list中的数据来自于app
          又因为v-model实现了数据的双向绑定
          当我们在点击这个复选框的 很明显 item组件直接修改了app组件中的数据!

          这个情况;在当前项目中并不是很严重;但是为了一个良好的数据传递规范的维护
            我们说 子组件是不能直接修改祖先组件的数据的
               如果数据是独立的 ; 要转存一份再修改
               如果数据是共用的 ; 要通知祖先组件自己修改

           怎么解决:
            将v-model后的数据定义为计算属性;通过其get方法来显示数据
                                          通过其set方法来通知对应的组件修改数据
        -->
        <input type="checkbox" v-model="checked">
        <span>{{item.content}}</span>
      </label>
      <button class="btn btn-danger"
              @click="del(item.id)">删除</button>
    </li>
</template>

<script>
    export default {
        name: "todo-item",
        props:{
          item:Object
        },
        computed:{
          checked:{
            get(){return this.item.checked},
            set(val){
              //在set方法中去通知富足及进行数据的修改
              this.$bus.$emit("checked",this.item,val)
            }
          }
        },
        methods:{
          //通知app组件去删除对应的数据
          del(id){
            this.$bus.$emit("del",id)
          }
        }
    }
</script>

<style scoped>
  li:hover{
    background: pink;
  }
  li:hover button{
    display: block;
  }
  li{
    position: relative;
  }
  li.line:after{
    display: block;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 2px;
    width: 80%;
    background: red;
  }

  li {
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
  }

  li label {
    float: left;
    cursor: pointer;
  }

  li label li input {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
  }

  li button {
    float: right;
    display: none;
    margin-top: 3px;
  }

  li:before {
    content: initial;
  }

  li:last-child {
    border-bottom: none;
  }
</style>
